<template>
  <el-dialog title="患者签名记录" :visible="value" width="700px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <table v-if="tableList.length>0" class="table-box printOrder-data">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>签署地址</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableList" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.url}}</td>
        </tr>
      </tbody>
    </table>
    <div class="none_data_box" v-if="tableList.length<1">
      <img src="/img/none_data.png" height="48" width="48" />
      <span>暂无数据</span>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "curItem"],
  data() {
    return {
      tableList: [],
      pager: { pageNum: 1, pageSize: 10, total: 0 }
    };
  },
  mounted() {
    let th = this;
    th.getRrcordList();
  },
  methods: {
    getRrcordList() {
      let th = this;
      let json = {
        patientId: th.curItem.patientId,
        status: 1
      };
      Object.assign(json, th.pager);
      th.$api
        .getSignInformedConsent(json)
        .then(res => {
          if (res.executed) {
            th.tableList = res.dataBody.list;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onOpen() {},
    onClose() {
      let th = this;
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.edit_user_box {
  display: inline-block;
  position: relative;
  width: 100%;
  //   max-height: 400px;
  padding-bottom: 120px;
  overflow-y: auto;
  margin: 70px 0px 20px 0px;
}
.line_check_box {
  width: 90% !important;
  margin: 10px 5% 20px 0% !important;
}

.time-vertical {
  list-style-type: none;
  border-left: 1px solid #eeeeee;
  padding: 0px;
  margin-left: 105px;
  position: relative;
  padding-top: 30px;
  //   min-height: 400px;
  dd {
    height: 80px;
    position: relative;
  }
  span {
    // position: absolute;
    color: #101010;
    font-size: 18px;
    display: inline-block;
    width: 100%;
    // top: 12px;
    // left: 20px;
  }
  a {
    display: inline-block;
    // margin-left: 20px;
    // margin-top: 40px;
    text-decoration: none;
    cursor: pointer;
    color: #009688;
  }
}
.time-vertical::before {
  content: "";
  background-image: url("/img/time.png");
  position: absolute;
  display: inline-block;
  width: 30px;
  top: -1px;
  left: -16px;
  background-color: #fff;
  height: 30px;
}
.record_axis_line {
  max-height: 600px;
  overflow-y: auto;
}
.time_dl_vertical {
  position: relative;
  dt {
    position: absolute;
    background-color: #fff;
    height: 40px;
    color: #ccc;
    left: -18px;
    top: -30px;
    font-size: 14px;
    line-height: 40px;
  }
}

.time-vertical dd b:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -45px;
  width: 8px;
  height: 8px;
  border: 2px solid #009688;
  border-radius: 10px;
  background: #009688;
}
.time_axis_line {
  position: absolute;
  left: -110px;
  top: 10px;
  width: 70px;
  color: #009688;
  text-align: center;
  font-size: 22px !important;
  span {
    position: static !important;
    color: #009688 !important;
    display: inline-block;
    width: 100%;
    font-size: 14px !important;
  }
}
.none_data_box {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 85px;
  padding-bottom: 115px;
  height: 70px;
  span {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    font-size: 20px;
    color: #cdcdcd;
  }
}
.date_year {
  font-size: 12px;
  color: #8dd2ca;
}
</style>
